<template>
  <div class="order-detail">
    <div class="header">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>订单状态</span>
        </div>
        <div>
          {{ orderData.orderStatusString }}
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>创建时间</span>
        </div>
        <div>
          {{ orderData.createTime }}
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>订单号</span>
        </div>
        <div>
          {{ orderData.orderNo }}
        </div>
      </el-card>
    </div>
    <el-table
      :data="orderData.newBeeMallOrderItemVOS"
      border
      style="width: 100%"
    >
      <el-table-column label="商品图片">
        <template #default="{ row }">
          <el-image
            :src="row.goodsCoverImg"
            :preview-src-list="[row.goodsCoverImg]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="goodsId" label="商品编号"> </el-table-column>
      <el-table-column prop="goodsName" label="商品名"></el-table-column>
      <el-table-column prop="goodsCount" label="商品数量"> </el-table-column>
      <el-table-column prop="sellingPrice" label="价格"> </el-table-column>
    </el-table>
  </div>
</template>


<script>
export default {
  name: "order-detail",
  data() {
    return {
      orderData: {},
    };
  },
  methods: {
    async query() {
      this.loading = true;
      try {
        let { resultCode, data } = await this.$api.OrderManager.orderDetail(
          this.$route.query.id
        );
        if (+resultCode !== 200) {
          this.loading = false;
          return;
        }
        this.orderData = Object.freeze(data);
      } catch (_) {
        _;
      }
      this.loading = false;
    },
  },
  created() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
.header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 50px;
  .el-card {
    font-size: 16px;
  }
}
</style>